iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
Mobile Development

前端工程師的 Flutter 新手村挑戰系列 第 13

【前端的 Flutter 新手村】Day13-客製化屬於你自己的Flutter Theme Widget

  • 分享至 

  • xImage
  •  

不論是網頁還是App整體設計風格都會有統一配色和文字樣式,在Flutter中,我們可以自行定義一套專屬於你的App外觀主題Theme,更方便的讓App風格一致化。
Theme有分成全域和區域:

  • 全域:會影響整個App,是最外層的Theme,在MaterialApp裡定義它,如果沒有設定則會遵照Flutter預設值。
  • 區域:各個小組件裡自行定義的Theme,如果沒有設定,樣式會遵照全域Theme。
MaterialApp( //全域Theme
  theme: ThemeData(
    primaryColor: Colors.lightBlue[800],
    fontFamily: 'Montserrat',
    textTheme: TextTheme(
      headline: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      ...
    ),
  )
)

你一定會好奇是所有的樣式都可以自定義嗎?ThemeData有規定哪些樣式是可以讓開發者自行定義的,例如:accentColor、backgroundColor、brightness、errorColor......在這邊都有明確列出來。

接著我們要使用剛剛定義好的Theme

Theme.of(context).[theme_name]
Theme.of(context).accentColor  //舉例

Theme.of(context)會從widget tree最接近的theme開始查找(從父層往外找),如果找不到就會回到預設的全域Theme設定。


今天的結論就是:善用Theme控管你的App樣式,就像用Sass寫變數一樣,減少我們key錯色碼的機率。原本設計稿上是用亮橘色,但色碼不小心打錯,就變成另一個深橘色,設計師會討厭你的。

想參考Theme的程式碼可以看這裡


上一篇
【前端的 Flutter 新手村】Day12-懶洋洋的週末就來做個卡片吧
下一篇
【前端的 Flutter 新手村】Day14-簡單又快速地打包Flutter圖片資源
系列文
前端工程師的 Flutter 新手村挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言